<!DOCTYPE html>
<html>
  <head>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.0.7/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/google/code-prettify/master/src/prettify.css">
    <link rel="stylesheet" type="text/css" href="../examples.css">

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.0.7/semantic.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

    <script src="../sm-core.js"></script>
    <script src="../sm-addons.js"></script>
    <script src="../dropdown/sm-dropdown.js"></script>

    <script>
      angular.module('semantic-ui')
        .controller('MainController', function($scope) 
        {
          $scope.handleClick = function(item, $event)
          {
            alert( item.label );
          };
        })
      ;
    </script>

  </head>
  <body ng-app="semantic-ui" ng-controller="MainController">

    <div class="ui container">
    
      <div class="ui segment">

        <h3 class="ui header">List</h3>

        <p>A list groups related content.</p>

        <br><br>

        <div data-copy-to="#example0">
          <div ng-controller="ListController0">
            <sm-list items="items"></sm-list>
          </div>
          <script>
            angular.module('semantic-ui')
              .controller('ListController0', function($scope) {
                $scope.items = ['Apples', 'Pears', 'Oranges'];
              })
            ;
          </script>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example0"></pre>
        
        <br><br>

        <div data-copy-to="#example1">
          <div ng-controller="ListController1">
            <sm-list items="items" description="item.label" icon="item.icon"></sm-list>
          </div>
          <script>
            angular.module('semantic-ui')
              .controller('ListController1', function($scope) {
                $scope.items = [
                  {icon: 'users', label: 'Semantic UI'},
                  {icon: 'marker', label: 'Mount Joy, PA'},
                  {icon: 'mail', label: '<a href="mailto:pdiffenderfer+sui@gmail.com">pdiffenderfer+sui@gmail.com</a>'},
                  {icon: 'linkify', label: '<a href="http://www.semantic-ui.com">semantic-ui.com</a>'}
                ]
              })
            ;
          </script>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example1"></pre>
        
        <br><br>

        <div data-copy-to="#example2">
          <div ng-controller="ListController2">
            <sm-list class="relaxed divided" items="items" description="item.d" icon="'large github middle aligned'" header="item.h" header-href="'https://github.com/' + item.h"></sm-list>
          </div>
          <script>
            angular.module('semantic-ui')
              .controller('ListController2', function($scope) {
                $scope.items = [
                  {h: 'Semantic-Org/Semantic-UI', d: 'Updated 10 mins ago'},
                  {h: 'Semantic-Org/Semantic-UI-Docs', d: 'Updated 22 mins ago'},
                  {h: 'Semantic-Org/Semantic-Org/Semantic-UI-Meteor', d: 'Updated 34 mins ago'}
                ];
              })
            ;
          </script>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example2"></pre>
        
        <br><br>

        <div data-copy-to="#example3">
          <div ng-controller="ListController3">
            <sm-list items="items" icon="'folder'" description="item.d" header="item.h" children="item.c"></sm-list>
          </div>
          <script>
            angular.module('semantic-ui')
              .controller('ListController3', function($scope) {
                $scope.items = [
                  {h: 'src', d: 'Source files for project', c: [
                    {h: 'site', d: 'Your site\'s theme'},
                    {h: 'themes', d: 'Packaged theme files', c: [
                      {h: 'default', d: 'Default packaged theme'},
                      {h: 'my_theme', d: 'Packaged themes are also available in this folder'}
                    ]},
                    {h: 'theme.config', d: 'Config file for setting packaged themes'}
                  ]},
                  {h: 'dist', d: 'Compiled css and js files', c: [
                    {h: 'components', d: 'Individual component css and js'}
                  ]},
                  {h: 'semantic.json', d: 'Contains build settings for gulp'}
                ];
              })
            ;
          </script>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example3"></pre>
        
        <br><br>

        <div data-copy-to="#example4">
          <div ng-controller="ListController4">
            <sm-list class="bulleted" items="items" description="item.d" children="item.c"></sm-list>
          </div>
          <script>
            angular.module('semantic-ui')
              .controller('ListController4', function($scope) {
                $scope.items = [
                  {d: 'Gaining Access'},
                  {d: 'Inviting Friends'},
                  {d: 'Benefits', c: [
                    {d: 'Use Anywhere'},
                    {d: 'Rebates'},
                    {d: 'Discounts'}
                  ]},
                  {d: 'Warranty'}
                ];
              })
            ;
          </script>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example4"></pre>
        
        <br><br>

        <div data-copy-to="#example5">
          <div ng-controller="ListController5">
            <sm-list items="items" header="item.h" description="item.d" image="'http://semantic-ui.com/' + item.g" header-href></sm-list>
          </div>
          <script>
            angular.module('semantic-ui')
              .controller('ListController5', function($scope) {
                $scope.items = [
                  {h: 'Rachel', d: 'Last seen watching <a><b>Arrested Development</b></a> just now.', g: 'images/avatar2/small/rachel.png'},
                  {h: 'Lindsay', d: 'Last seen watching <a><b>Bob\'s Burgers</b></a> 10 hours ago.', g: 'images/avatar2/small/lindsay.png'},
                  {h: 'Matthew', d: 'Last seen watching <a><b>The Godfather Part 2</b></a> yesterday.', g: 'images/avatar2/small/matthew.png'},
                  {h: 'Jenny Hess', d: 'Last seen watching <a><b>Twin Peaks</b></a> 3 days ago.', g: 'images/avatar/small/jenny.jpg'},
                  {h: 'Veronika Ossi', d: 'Has not watched anything recently', g: 'images/avatar/small/veronika.jpg'}
                ];
              })
            ;
          </script>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example5"></pre>

      </div>
      
    </div>

    <script src="../examples.js"></script>

  </body>
</html>